<template>
	<van-popup v-model="visible" round position="bottom" safe-area-inset-bottom>
		<div class="appointment">
			<h3 class="title">绑定你的手机号</h3>
			<div style="flex: 1; overflow: auto">
				<van-form
					ref="form"
					@submit="onSubmit"
					@failed="onFailed"
					:show-error-message="false"
					class="form"
				>
					<!-- <p>订单号：{{ order_sn }}</p> -->
					<div class="group-box" :key="visible">
						<div class="countdown">
							拼团成功，剩余
							<van-count-down
								ref="pageCountDown"
								:time="countDownTime"
								format="mm 分 ss 秒"
							>
								<template #default="timeData">
									<span class="block">0{{ timeData.minutes }}</span>
									<span class="colon">分</span>
									<span class="block">{{
										timeData.seconds > 9
											? timeData.seconds
											: "0" + timeData.seconds
									}}</span>
									<span class="colon">秒</span>
								</template>
							</van-count-down>
						</div>
						<div class="users">
							<div class="avatar" v-for="(v, i) in users" :key="i">
								<img :src="require(`@/assets/image/user/${v}`)" />
							</div>
							<div class="avatar self">
								<img src="@/assets/image/14.png" />
								<span>我自己</span>
							</div>
						</div>
					</div>

					<div class="input-box">
						<div class="input">
							<label>手机号</label>
							<van-field
								v-model.trim="form.mobile"
								type="tel"
								placeholder="点击填写手机号（必填）"
								maxlength="11"
								:rules="rules.mobile"
							/>
						</div>
						<div class="tip">手机号仅用于预约门店使用</div>
					</div>
				</van-form>
			</div>
			<div class="submitbar">
				<div class="left">
					<div class="price">
						￥<span>{{ options.pay_money }}</span>
					</div>
					<div class="city">{{ form.address }}</div>
				</div>
				<div class="submit" @click="clickSubmit">确认支付</div>
			</div>
		</div>
	</van-popup>
</template>
<script>
import dayjs from "dayjs";
import { mobile } from "@/utils/pattern";
import { randomNum } from "@/utils";
const randomUser = () => [randomNum(60) + ".jpeg", randomNum(60) + ".jpeg"];
export default {
	props: {
		options: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		let now = dayjs();
		return {
			visible: false,
			appointDate: {
				min: now.add(1, "d").toDate(),
				max: now.add(30, "d").toDate()
			},
			form: {
				name: "",
				mobile: "",
				address: "",
				appoint_date: ""
			},
			rules: {
				mobile: [
					{ required: true, message: "请填手机号" },
					{ pattern: mobile, message: "手机号格式不正确" }
				],
				consignee_tel: [
					{
						message: "收货人手机号格式不正确",
						validator: (val) => {
							if (!val) return true;
							return mobile.test(val);
						}
					}
				],
				area: [{ required: true, message: "请选择收货地区" }],
				address: [{ required: true, message: "请填详细地址" }]
			},
			countDownTime: 10 * 60 * 1000,
			users: randomUser()
		};
	},

	methods: {
		open(city) {
			this.visible = true;
			this.form.address = city;
			this.users = randomUser();
		},
		close() {
			this.visible = false;
			this.form = {
				name: "",
				mobile: "",
				address: "",
				appoint_date: ""
			};
		},
		openAppointDate() {
			this.$refs.datePicker.open();
		},
		appointDateConfirm(v) {
			this.form.appoint_date = dayjs(v).format("YYYY-MM-DD");
		},
		// 表单错误
		onFailed({ errors }) {
			this.$toast({
				message: errors[0].message,
				position: "top"
			});
		},
		clickSubmit() {
			this.$refs.form.submit();
		},
		async onSubmit() {
			// this.$toast(this.$api === undefined);
			// return;

			const { name, mobile, address, ...args } = this.form;
			let form = {
				name,
				mobile,
				address,
				data_set: args
				// user_id
			};
			this.$emit("submit", form);
		}
	}
};
</script>

<style lang="scss" scoped>
.appointment {
	font-size: 0.3111rem;
	background: #ffd9d2;
	// padding: 10px;
	max-height: 70vh;
	max-width: 640px;
	margin: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	.submitbar {
		display: flex;
		justify-content: space-around;
		// border-top: solid 1px #ebedf0;
		cursor: pointer;
		font-size: 0.35555rem;
		padding: 0.22222rem 0.111111rem;
		background: #fff;
		/* color: #909399; */
		.left {
			margin: 0 1%;
			flex: 1;
			padding-left: 0.1rem;
			padding-right: 0.33333rem;
			display: flex;
			align-items: flex-end;
			.price {
				color: #ff4b00;
				font-size: 0.48889rem;
				font-weight: bold;
				span {
					font-size: 0.84444rem;
					line-height: 0.6rem;
				}
			}
			.city {
				margin-left: 5px;
				margin-bottom: 4px;
				color: #999;
				font-size: 0.28rem;
				font-weight: bold;
			}
		}
		.submit {
			text-align: center;
			margin: 0 1%;
			flex: 1;
			height: 1rem;
			line-height: 1rem;
			border-radius: 0.5rem;
			font-size: 0.45rem;
			font-weight: bold;
			color: #fff;
			background: linear-gradient(90deg, #ff822a 0%, #ff4f00 100%);
			box-shadow: 0px 1px 6px 0px rgb(254 167 131 / 50%);
		}
	}
	.title {
		background-color: #ffa96f;
		color: #fff;
		margin: 0;
		padding: 0.3rem;
		text-align: center;
	}
	::v-deep .van-cell {
		margin: 5px 0 16px;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		padding: 8px 12px;
	}
	.group-box {
		background: #fff;
		border-radius: 6px;
		padding: 0.48889rem 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.countdown {
			display: flex;
			align-items: center;
			padding-bottom: 0.48889rem;

			.num {
				color: #ff4b00;
			}
			.van-count-down {
				margin-left: 4px;
			}
			.colon,
			.block {
				display: inline-block;
			}
			.colon {
				padding: 0px 3px;
				color: #fe473d;
			}
			.block {
				width: 30px;
				color: #fff;
				font-size: 12px;
				padding: 0px 6px;
				border-radius: 3px;
				text-align: center;
				background-color: #fe473d;
			}
		}
		.users {
			display: flex;
			align-items: center;
			.avatar {
				width: 1rem;
				height: 1rem;
				margin: 0.13333rem;
				img {
					height: 100%;
					width: 100%;
					border-radius: 50%;
				}
				&.self {
					position: relative;

					span {
						position: absolute;
						bottom: -0.1rem;
						left: 50%;
						transform: translateX(-50%);
						background: linear-gradient(90deg, #ff822a 0%, #ff4f00 100%);
						display: inline-block;
						font-size: 0.25rem;
						color: #fff;
						width: 0.9rem;
						height: 0.38rem;
						line-height: 0.38rem;
						border-radius: 0.3rem;
						text-align: center;
					}
				}
			}
		}
	}
	.input-box {
		margin-top: 0.44444rem;

		background: #fff;
		border-radius: 6px;
		padding: 0.2rem;
		padding-left: 0.4rem;
		.tip {
			font-size: 0.31111rem;
			color: #ff4b00;
		}
	}
	.input {
		display: flex;
		align-items: center;
		font-size: 0.42rem;
		font-weight: bold;
		::v-deep {
			.van-field {
				flex: 1;
				border: none;
				margin: 0;
				input {
					text-align: right;
					font-size: 0.4rem;
				}
			}
		}
	}
	.form {
		padding: 0.44444rem;
		width: 100%;
		box-sizing: border-box;
		p {
			margin-bottom: 5px;
			color: #999;
			font-size: 0.3111rem;
		}

		&-item {
			margin-bottom: 0.222222rem;
			label {
				color: #666;
				position: relative;
				font-size: 0.32rem;
				span {
					color: #888;
				}
			}
			&.required label {
				// padding-left: 8px;
				text-indent: 8px;
				display: block;
				&::after {
					content: "*";
					position: absolute;
					left: -8px;
					top: 0;
					color: red;
				}
			}
		}
	}
}
</style>
